<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="script/jquery-1.10.min.js">
// <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
<!-- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
<script src="script/bootstrap-3.3.7.min.js"></script>
<script src="script/bootstrap-3.3.7.min.js"></script>
<script src="script/bootbox.min.js"></script>
</script>
<style type="text/css">
  .row{
    margin: 100px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <table class="table">
          <thead>
            <th></th>
            <th>用户名</th>
            <th>地址</th>
            <th>性别</th>
          </thead>
          <tbody>
            <tr>
            <td><input type="checkbox" value="1" name="3"></td><td>张三</td><td>北京</td><td>男</td>
            </tr>
            <tr>
            <td><input type="checkbox" value="2" name="2"></td><td>李四</td><td>北京</td><td>男</td>
            </tr>
            <tr>
            <td><input type="checkbox" value="3" name="1"></td><td>王五</td><td>北京</td><td>男</td>
            </tr>
          </tbody>

        </table>

      </div>

    </div>
    <div class="row">
      <button class="btn btn-info" onclick="selectAll()"> 全选</button>
      <button class="btn btn-success" onclick="reverse()"> 反选</button>



    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <table class="table" id="left_table">
      <thead>
        <th>name</th>
        <th>sex</th>
        <th>addr</th>
      </thead>
      <tbody>
        <tr>
          <td>abc</td>
          <td>ddd</td>
          <td>acaa</td>
        </tr>

        <tr>
          <td>111</td>
          <td>
            <div>
              <table>
                <tr><td>123</td><td>321</td></tr>
              </table>
            </div>
          </td>
          <td>acaa</td>
        </tr>

        </tbody>
      </table>
        <button class="btn btn-danger" id="selector">选择器</button>
        <div>
              <label  class="label label-default">#left_table  > tbody > tr > td :</label>
              <label id ="a" class="label label-info">0</label>个, > 只有第一层子节点
              <br><br>
              <label class="label label-default">#left_table  > tbody   tr > td :</label>
              <label id = "b" class="label label-info">0</label>个
        </div>
    </div>

  </div>
</body>

<script type="text/javascript">
$("#selector").click(function(event) {
  // $("#left_table  > tbody > tr > td").each(function(index, el) {
  //     console.log($(this).text())
  // });;

  console.log($("#left_table  > tbody > tr > td").length);
  console.log($("#left_table  > tbody   tr > td").length);
  $("#a").text($("#left_table  > tbody > tr > td").length);
  $("#b").text($("#left_table  > tbody  tr > td").length);
});


function selectAll(){
  $("td input").prop("checked",true)
    // $("td input:not(:checked)").attr("checked","checked")
};

function reverse(){
  $("td input").each(function(index, el) {
    // console.log($(this).attr("checked"))
    if ($(this).is(":checked")){
      console.log(1)
        $(this).prop('checked',false)
    }else{
        $(this).prop("checked",true)
    }
    
  });

};
</script>
</html>
